import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core'

@Component({
  selector: 'app-ex0501',
  templateUrl: './ex0501.component.html',
  styleUrls: ['./ex0501.component.scss']
})
export class Ex0501Component implements OnInit, AfterViewInit {
  protected cnv: any
  protected ctx: any
  length: number

  @ViewChild('canvas')
  set canvas(ref: ElementRef) {
    this.cnv = ref.nativeElement
    this.ctx = ref.nativeElement.getContext('2d')
  }

  constructor() {
  }

  ngOnInit(): void {
  }

  ngAfterViewInit(): void {
    // this.draw1(this.ctx)
    // this.draw2(this.ctx)
    // this.draw3(this.ctx)
    // this.draw4(this.ctx)
    // this.draw5(this.ctx)
    this.draw6(this.ctx)
  }

  draw1(ctx): void {
    const text = '你好世界'
    ctx.font = 'bold 30px 微软雅黑'
    ctx.strokeStyle = 'purple'
    ctx.strokeText(text, 30, 60)
  }

  draw2(ctx): void {
    const text = '你好世界'
    ctx.font = 'bold 30px 微软雅黑'
    ctx.fillStyle = 'purple'
    ctx.fillText(text, 30, 60)
  }

  draw3(ctx): void {
    const text = '你好世界'
    ctx.font = 'bold 30px 微软雅黑'
    ctx.strokeStyle = 'red'
    ctx.strokeText(text, 30, 60)

    this.length = ctx.measureText(text).width
  }

  draw4(ctx): void {
    const text = 'helicopter'
    ctx.font = 'bold 30px 微软雅黑'
    ctx.fillStyle = 'purple'
    ctx.fillText(text, 30, 60)
    this.length = ctx.measureText(text).width
  }

  draw5(ctx): void {
    ctx.strokeStyle = 'purple'
    ctx.moveTo(150, 0)
    ctx.lineTo(150, 200)
    ctx.stroke()

    ctx.font = '15px Arial'
    ctx.textAlign = 'start'
    ctx.fillText('textAlign取值为start', 150, 30)

    ctx.textAlign = 'left'
    ctx.fillText('textAlign取值为left', 150, 60)

    ctx.textAlign = 'end'
    ctx.fillText('textAlign取值为end', 150, 90)

    ctx.textAlign = 'right'
    ctx.fillText('textAlign取值为right', 150, 120)

    ctx.textAlign = 'center'
    ctx.fillText('textAlign取值为center', 150, 150)
  }

  draw6(ctx): void {
    ctx.strokeStyle = 'purple'
    ctx.moveTo(0, 100)
    ctx.lineTo(300, 100)
    ctx.stroke()

    ctx.font = '20px Arial'
    ctx.textBaseline = 'alphabetic'
    ctx.fillText('alphabetic', 10, 100)

    ctx.textBaseline = 'top'
    ctx.fillText('top', 110, 100)

    ctx.textBaseline = 'middle'
    ctx.fillText('middle', 160, 100)

    ctx.textBaseline = 'bottom'
    ctx.fillText('bottom', 230, 100)
  }
}
